<template>
  <a-form>
    <a-row :gutter="24">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="年度">
          <!-- <a-input v-model="queryParam.year" allowClear placeholder="" /> -->
          <a-select v-model="queryParam.year" style="width: 120px" @change="handleChangeYear">
            <a-select-option v-for="(year) in years" :key="year" :value="year">
              {{ year }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="月度">
          <!-- <a-input v-model="queryParam.month" allowClear placeholder="" /> -->
          <a-select v-model="queryParam.month" style="width: 120px" @change="handleChangeMonth">
            <a-select-option v-for="(month) in months" :key="month" :value="month">
              {{ month }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="12" :md="12" :sm="24">
        <a-form-item :style="{ float: 'right' }">
          <a-button style="margin-left: 14px;" @click="onSearch" type="primary">查询</a-button>
          <a-button v-if="area === 'basic'" style="margin-left: 14px;" @click="onSure()">暂存</a-button>
          <!-- <a-button v-if="area === 'basic'" style="margin-left: 14px;" @click="enSure()" disabled>更新</a-button> -->
          <a-popconfirm v-if="area === 'basic'" title="上报后不能修改，是否确认上报？" ok-text="是" cancel-text="否" @confirm="onSubmit()">
            <a-button style="margin-left: 14px;" :disabled="queryParam.isSubmit == true ">上报</a-button>
          </a-popconfirm>
          <a-button v-if="area === 'basic'" type="primary" style="margin-left: 14px;" @click="exportExcel">导出</a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import '@/views/treeselect1.css'
import { deleteChildrenIfNull2 } from '@/utils/util'
import { authDevice } from '@/utils/mixin'

import { GetAllChildDeptByParentID } from '@/api/project'
import { getDicList } from '@/api/dict'

const userInfo = Vue.ls.get(ACCESS_TOKEN)

export default {
  name: 'SearchForm',
  mixins: [authDevice],
  components: {},
  props: {
    area: {
      type: String,
      require: false
    },
    query: {
      type: Object,
      require: false
    }
  },
  data() {
    return {
      fileList: [],
      userInfo,
      more: false,
      open: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 }
        }
      },
      queryParam: this.query,
      years: [],
      yearsTemp: [2022,2023,2024,2025,2026,2027,2028,2029,2030,2031,2032,2033,2034,2035],
      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    }
  },
  watch: {
    query() {
      this.queryParam = this.query
    }
  },
  computed: {},
  created() {
    this.isDepartment = false
    GetAllChildDeptByParentID(this.userInfo.DepartmentID).then(res => {
      res.forEach(r => {
        if (r.Id === this.userInfo.DepartmentID) {
          this.queryParam.departmentID = r.Id
          this.isDepartment = true
        }
      })
      this.departmentOptions = res
    })
    getDicList({ categoryId: 2069 }).then(res => {
      this.projectTypeOptions = res
    })
    const yearMap = this.yearsTemp
    const thisYear = new Date().getFullYear()
    yearMap.forEach(y => {  
      if (thisYear >= y) {
        this.years.push(y)
      }
    })
  },
  mounted() { },
  methods: {
    toggle() {
      this.more = !this.more
    },
    startDateStartChange(dates, dateStrings) {
    },
    startDateEndChange(dates, dateStrings) {
    },
    handleChangeYear(val, option) {
      this.queryParam.year = val
    },
    handleChangeMonth(val, option) {
      this.queryParam.months = val
    },
    handleTypeChange(val, option) {
      this.queryParam.ProjectTypeID = val
    },
    deleted() {
      this.$emit('handleDel')
    },
    onSure() {
      this.$emit('onSure')
    },
    onSearch() {
      const objData = {
        departmentID: this.queryParam.departmentID,
        year: this.queryParam.year,
        month: this.queryParam.month
      }
      this.$emit('onSearch', objData)
    },
    onSubmit() {
      this.$emit('onSubmit')
    },
    exportExcel() {
      const objData = {
        departmentID: this.queryParam.departmentID,
        year: this.queryParam.year,
        month: this.queryParam.month
      }
      this.$emit('exportXls', objData)
    }
  }
}
</script>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 0;
}
</style>
